{% extends "base.html" %}

{% block title %}成员工时统计详情 - 精准效能管理平台{% endblock %}

{% block content %}
<div class="project-detail-container">
    <!-- 返回按钮 -->
    <div class="back-button-container">
        <button onclick="goBack()" class="btn btn-secondary">← 返回列表</button>
    </div>
    
    <!-- 成员概览信息 -->
    <div class="project-overview">
        <h2 id="member-title">成员工时统计详情</h2>
        <div class="overview-cards">
            <div class="overview-card">
                <h3>成员姓名</h3>
                <p id="member-name">-</p>
            </div>
            <div class="overview-card">
                <h3>统计周期</h3>
                <p id="statistics-period">-</p>
            </div>
            <div class="overview-card">
                <h3>角色</h3>
                <p id="member-role">-</p>
            </div>
            <div class="overview-card">
                <h3>饱和度</h3>
                <p id="saturation-rate">-</p>
            </div>
            <div class="overview-card">
                <h3>已用工时</h3>
                <p id="used-worktime">-</p>
            </div>
            <div class="overview-card">
                <h3>项目工时</h3>
                <p id="project-worktime">-</p>
            </div>
        </div>
    </div>

    <!-- 工时分类统计 -->
    <div class="role-stats-section">
        <h3>工时分类统计</h3>
        <div class="data-table-container">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>工时类型</th>
                        <th>工时数量</th>
                        <th>占比</th>
                    </tr>
                </thead>
                <tbody id="worktime-category-tbody">
                </tbody>
            </table>
        </div>
    </div>

    <!-- 项目投入统计 -->
    <div class="role-stats-section">
        <h3>项目投入统计</h3>
        <div class="data-table-container">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>项目名称</th>
                        <th>投入工时</th>
                        <th>系统数量</th>
                        <th>需求数量</th>
                        <th>工时占比</th>
                    </tr>
                </thead>
                <tbody id="project-stats-tbody">
                </tbody>
            </table>
        </div>
    </div>

    <!-- 项目详情 -->
    <div class="systems-section">
        <h3>项目详情</h3>
        <div id="projects-container">
            <!-- 项目详情将通过JavaScript动态生成 -->
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/member_worktime_detail.js') }}"></script>
<script>
    // 从URL参数获取成员信息
    const urlParams = new URLSearchParams(window.location.search);
    const name = urlParams.get('name');
    const period = urlParams.get('period');
    
    // 页面加载完成后加载成员详情
    document.addEventListener('DOMContentLoaded', function() {
        if (name && period) {
            loadMemberWorktimeDetail(name, period);
        } else {
            showMessage('缺少必要参数', 'error');
        }
    });
</script>
{% endblock %}